<template>
  <div>
    <mt-header title="预约详情" style="background-color: #01ddb9; color: white">
      <div @click="$router.go(-1)" slot="left">
        <mt-button icon="back" style="color: white"></mt-button>
      </div>
    </mt-header>

    <div
      class="statusBox"
      v-for="(item, id,i) in resever.filter((v) => v.id == this.$route.query.id)"
      :key="i"
    >
      当前状态 -{{!item.qxgh?'已取消':(item.qxgh&&item.issee?'已就诊':'待就诊')}}
    </div>

    <div class="yyConnt" v-for="(item, id) in resever.filter(
          (v) => v.id == this.$route.query.id
        )"
        :key="id">
      <div
        class="reserveContent">
        <div class="reserveText">预约信息</div>
        <div class="yyItem">就诊患者：{{ item.name }}</div>
        <div class="yyItem">证件号:{{ item.ID_number }}</div>
        <div class="yyItem">就诊医院：{{ item.hosPital }}</div>
        <div class="yyItem">就诊科室：{{ item.department }}</div>
        <div class="yyItem">医生姓名：{{ item.dname }}</div>
        <div class="yyItem">就诊时间：{{ item.register_time }}</div>
        <div class="yyItem">医院地址：{{ item.hospital }}</div>
        <div class="yyItem">医事服务费：{{ item.price }}</div>

        <div class="tip">
          请凭有效证件到医院门诊取号，
          医事服务费均在就诊时由医院直接收取，本品台不收取任何费用。
        </div>

        <div class="skill">
          擅长：牙列不齐的正确急性治疗、阻断性治疗。
          骨性错合畸形的术前术后正畸治疗种植体支抗的临床应用。
        </div>
      </div>

      <div class="zhuyi">
        <div class="tipText">注意事项</div>
        <div class="tipContent">
          1.每个账号每月挂号和取消挂号数量有上限，请按需求预约 若超出
          取消上限则不能再次挂号； 2.当日号源停止挂号时间15:30。
        </div>
      </div>

      <div class="buttBox" v-if="item.qxgh&&!item.issee">
        <button class="quxiaoBUTT" @click="qxPopup">取消挂号</button>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="mask" v-if="mask">
      <div class="maskBox" v-for="(item, id) in resever.filter(
          (v) => v.id == this.$route.query.id
        )" :key="id">
        <div class="off">取消号源提示</div>
        <div class="chooseText">
          <div class="textPop">就诊医院：{{ item.hospital }}</div>
          <div class="textPop">就诊科室：{{ item.department }}</div>
          <div class="textPop">就诊时间：{{ item.register_time }}</div>
        </div>

        <div class="choose">
          <div @click="choose">不取消</div>
          <div class="sure" @click="succPop">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  filters: {
    zt: function (value) {
      return value ? "已取消" : "待就诊";
    },
  },
  data() {
    return {
      // maskBox: false,
      mask: false,
      status: "待就诊",
      resever: [
        // {
        //   id: 0,
        //   name: "吕华",
        //   postNumber: "148975624843525",
        //   hosPital: "北京劲松口腔医院（五棵松院）",
        //   keshi: "口腔科",
        //   hosName: "赵宏",
        //   time: "2022-10-18 上午",
        //   place: "北京市海淀区复兴路69号院12号一层101",
        //   price: "￥ 10",
        // },
      ],
    };
  },
  mounted() {
    // let parms = `yhid=${this.$store.state.phone}`
    this.axios
      .get(`/users/my_reg\?yhid=${this.$store.state.phone}`)
      .then((res) => {
        // this.res = res.data
        this.resever = res.data.data;
      });
  },
  methods: {
    qxPopup() {
      MessageBox.prompt("请填写您的取消原因与问题", "取消原因", {}).then(
        (val) => {
          this.go_dl();
        },
        () => {
          console.info("cancel");
        }
      );
    },
    // 弹窗控制
    go_dl() {
      this.mask = true;
      // this.maskBox = true
    },
    offPop() {
      this.mask = false;
    },
    choose(){
      console.log(1)
    },
    succPop() {
      this.mask = false;
      // 确定取消,修改就诊状态
      // this.axios.put({
      //   headers: {
      //     "Content-Type": "application/json;",
      //   },
      //   // method: "PUT",
      //   url: "/wd_see",
      //   data: {
      //     issee: 1,
      //     id: this.$route.query.id,
      //   },
      // });
      let params = `id=${this.$route.query.id}&qxgh=0`;
      this.axios.put(`/back_no?${params}`).then(res=>{
        console.log(res)
      });
      this.$router.go(-2);
    },
  },
};
</script>

<style lang="scss" scoped>
.yyConnt {
  padding: 1vh 3vh;
  box-sizing: border-box;
}
page {
  background-color: #f7f8fa;
}
.statusBox {
  background-color: #01ddb9;
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
  box-sizing: border-box;
}
.reserveContent {
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 14px;
}
.reserveText {
  font-weight: 600;
  font-size: 16px;
}
.yyItem {
  margin-top: 10px;
}
.tip {
  margin: 15px 0;
  color: #84aed7;
  letter-spacing: 1px;
}
.skill {
  letter-spacing: 1px;
}
.zhuyi {
  margin-top: 20px;
  border-radius: 14px;
}
.tipText {
  font-weight: 600;
  font-size: 16px;
}
.tipContent {
  letter-spacing: 1px;
}
.buttBox {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: white;
  padding: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quxiaoBUTT {
  padding: 15px 30px;
  letter-spacing: 3px;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: #01ddb9;
  border: none;
}
// 弹窗
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 30px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
}

.maskBox {
  width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999999;
  border-radius: 10px;
  opacity: 1;
  border: none;
  background: rgba(255, 255, 255, 1);
  padding: 15px;
  box-sizing: border-box;
}
.off {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
}
.textPop {
  margin-top: 15px;
}
.choose {
 width: 80%;
 margin: 5vw auto;
 display: flex;
 justify-content: space-evenly;
 color: #fff !important;
 background: #41f2af;
 padding: 5vw 5vw; 
 border-radius: 15vw;
}

</style>